<template>
    <div class="movie-site">
        <!-- 导航栏 -->
        <component :is="currentNavBar" class="nav-bar">
            <van-nav-bar title="电影网站" v-if="isMobile" />
            <el-menu mode="horizontal" v-else @select="handleMenuSelect">
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">添加电影</el-menu-item>
            </el-menu>
        </component>

        <!-- 轮播图 -->
        <component :is="currentCarousel" class="carousel">
            <van-swipe :autoplay="3000" v-if="isMobile">
                <van-swipe-item v-for="(image, index) in carouselImages" :key="index">
                    <img :src="image" alt="轮播图" />
                </van-swipe-item>
            </van-swipe>
            <el-carousel v-else :interval="4000" arrow="always">
                <el-carousel-item v-for="(image, index) in carouselImages" :key="index">
                    <img :src="image" alt="轮播图" />
                </el-carousel-item>
            </el-carousel>
        </component>

        <!-- 电影列表 -->

        <component :is="currentMovieList" class="movie-list">
            <h3 style="margin-top: 10px;" v-if="isMobile">电影列表</h3>
            <van-grid v-if="isMobile" :column-num="2">
                <van-grid-item v-for="(movie, index) in movies" :key="index">
                    <van-image :src="movie.picPaths" style="width: 100%; height: 150px; object-fit: cover; border-radius: 5px;" />
                    <p>asdwasd<br>asdwasd<br>asdwasd</p>
                </van-grid-item>
                <van-back-top />
            </van-grid>
            <!-- <el-row v-else :gutter="20">
                <el-col v-for="(movie, index) in movies" :key="index" :span="6">
                    <el-card :body-style="{ padding: '0px' }">
                        <img :src="movie.poster" class="image" style="border-radius: 5px;" />
                        <div style="padding: 14px;">
                            <span>{{ movie.title }}</span>
                        </div>
                    </el-card>
                </el-col>
            </el-row> -->
            <div  style="width: 90%;margin: 10px auto;" v-else>
                <h3 style="margin: 40px 0 20px 0;">电影列表</h3>
            <el-space wrap :size="size"style="margin-top: 10px;">
                <el-card v-for="item in movies" :key="item.id" class="box-card" style="width: 300px">
                    <router-link :to="`/movie/${item.id}`" style="background-color: inherit;color: inherit;cursor: pointer;">
                        <div style="width:100%"> 
                            <img 
                            :src=item.picPaths
                            style="width: 100%; height: 200px; object-fit: cover; border-radius: 5px;"
                            alt=""/>
                        </div>
                        <h3>{{ item.title }}</h3>
                        <el-text>演员:{{item.actors}}<br>简介：{{ item.desc }}</el-text>
                    </router-link>
                </el-card>
            </el-space>
            </div>
        </component>
    </div>
    <el-dialog v-model="dialogFormVisible" title="添加电影信息" width="500px">
        <el-form :model="form" label-width="100px">
            <el-form-item label="电影名称">
                <el-input v-model="form.title" />
            </el-form-item>
            <el-form-item label="演员列表">
                <el-input v-model="form.actors" />
            </el-form-item>
            <el-form-item label="海报链接">
                <el-input v-model="form.picPaths" />
            </el-form-item>
            <el-form-item label="播放地址">
                <el-input v-model="form.playUrl" />
            </el-form-item>
            <el-form-item label="简介">
                <el-input v-model="form.desc" />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submitMovie">提交</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { TableName } from '@/utils/request'
import { add ,getList} from '@/utils/request'

// export default {
//   setup() {
const isMobile = ref(false);
const currentNavBar = ref(isMobile.value ? 'van-nav-bar' : 'el-menu')
const currentCarousel = ref(isMobile.value ? 'van-swipe' : 'el-carousel')
const currentMovieList = ref(isMobile.value ? 'van-grid' : 'el-row')
const carouselImages = [
    'https://ts1.tc.mm.bing.net/th/id/R-C.213d5545f3cd624b134baf5b4c0813b1?rik=KCNvuTkhdapelw&riu=http%3a%2f%2fthumb.takefoto.cn%2fwp-content%2fuploads%2f2019%2f02%2f201902160341357015.png&ehk=Zvc72s8KiCId9vm3R%2fv47dLF18vSGWs9tvxORiTQzkc%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1',
    'https://ts1.tc.mm.bing.net/th/id/R-C.213d5545f3cd624b134baf5b4c0813b1?rik=KCNvuTkhdapelw&riu=http%3a%2f%2fthumb.takefoto.cn%2fwp-content%2fuploads%2f2019%2f02%2f201902160341357015.png&ehk=Zvc72s8KiCId9vm3R%2fv47dLF18vSGWs9tvxORiTQzkc%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1',
    'https://ts1.tc.mm.bing.net/th/id/R-C.213d5545f3cd624b134baf5b4c0813b1?rik=KCNvuTkhdapelw&riu=http%3a%2f%2fthumb.takefoto.cn%2fwp-content%2fuploads%2f2019%2f02%2f201902160341357015.png&ehk=Zvc72s8KiCId9vm3R%2fv47dLF18vSGWs9tvxORiTQzkc%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1'
];

const movies = ref([
    { title: '电影1', poster: 'https://pic4.zhimg.com/v2-32b977840cca645d3dbf542ab4988e7f_r.jpg' },
    { title: '电影2', poster: 'https://pic4.zhimg.com/v2-32b977840cca645d3dbf542ab4988e7f_r.jpg' },
    { title: '电影3', poster: 'https://pic4.zhimg.com/v2-32b977840cca645d3dbf542ab4988e7f_r.jpg' },
    { title: '电影4', poster: 'https://pic4.zhimg.com/v2-32b977840cca645d3dbf542ab4988e7f_r.jpg' }
]);
const dialogFormVisible = ref(false);
const form = ref({
    title: '',
    actors:'',
    playUrl: '',
    picPaths:'',
    desc: ''
});

const handleMenuSelect = (index) => {
    if (index === '2') {
        dialogFormVisible.value = true;
    }
};

const submitMovie = async() => {
  console.log('提交数据:', form.value);
  await add(form.value, TableName.Movies)
};

const checkDevice = () => {
    isMobile.value = window.innerWidth < 768;
};

onMounted(async() => {
    checkDevice();
    const res = await getList(TableName.Movies)
    movies.value = res
    window.addEventListener('resize', checkDevice);
});
</script>

<style scoped>
.movie-site {
    font-family: Arial, sans-serif;
}

.nav-bar {
    margin-bottom: 20px;
}

.carousel {
    width: 100%;
    height: 300px;
    margin-bottom: 20px;
}

.carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.movie-list {
    padding: 0 20px;
    width: 95%;
    margin: 0 auto;
}

/* 移动端样式 */
.van-grid-item__content {
    padding: 10px;
}

.van-grid-item__text {
    font-size: 14px;
    margin-top: 5px;
}

/* PC端样式 */
.image {
    width: 100%;
    display: block;
}
</style>